


Facebook Messenger and Android SMS messages on AO3

by Rainsong



Category: No Fandom
Genre: CSS, Fanwork Research & Reference Guides, HTML, Work Skin
Language: English
Status: Completed
Published: 2021-03-02
Updated: 2021-03-03
Packaged: 2021-03-15 14:08:47
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 2
Words: 3,224
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/29809578
Author URL: https://archiveofourown.org/users/Rainsong/pseuds/Rainsong
Summary: A guide and ready-to-use code for creating basic Facebook Messenger and Android SMS conversations in your fics. Light and dark mode colour schemes for both, super easy to customize. Requires some basic HTML knowledge.
Comments: 3
Kudos: 3





	1. Chapter 1

**Author's Note:**

  * Inspired by [How to Make iOS Text Messages on AO3](https://archiveofourown.org/works/6434845) by [CodenameCarrot](https://archiveofourown.org/users/CodenameCarrot/pseuds/CodenameCarrot), [La_Temperanza](https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza). 



Before I get into anything else, a massive thank you to everyone who's shared their own guides to recreating social media posts and conversations on AO3. These formats are heavily based on the [iOS skin](https://archiveofourown.org/works/6434845/) by CodenameCarrot and La_Temperanza! Their guide for emojis should work with this, and it's a great place to start if you want to modify it yourself. I recommend using [Liveweave](https://liveweave.com/) if you're new to coding, it's what I used and it made it a lot easier.

This is my first time really playing around with CSS, so I would appreciate any advice on how to make the code better or add more features.

Missing features and things to fix that I couldn't figure out on my own or haven't done yet:

  * ~~Facebook dark mode (coming soon!)~~ Done! ~~  
~~
  * Hiding certain lines (like names, timestamps) in group chats when work skin is disabled
  * Better flow for screen reader (some way to put hidden pauses/breaks?)
  * Replies
  * Icons/profile pictures and active icons
  * Read receipts
  * System messages (new person added, changed group name, etc.)
  * Deleted messages
  * Images, link previews, videos
  * Menu buttons (back arrow, call button, etc.)
  * More accurate line spacing
  * @ messages don't have proper highlighting
  * Easier way to edit colour schemes (ideally it would just be one paragraph of code, so you could easily swap it without having to touch the rest)



**If you'd like to edit my code, you are welcome to do so with credit, no need to ask.**

**If you use my code in your fic, I'd also appreciate being credited.**

* * *

To use either or both skins, all you need to do is create a new work skin (your profile -> Skins -> My Work Skins -> Create Work Skin) and paste in the CSS. When creating or editing your work, choose the work skin from the dropdown menu, and you're set up. They can both be used in the same work, and can even be used alongside the iOS ones, which is why I gave everything unique names ("fbheader" instead of just "header").

Whenever you want to insert a conversation into your work, paste the HTML block into the work text, and edit it with the text you want, adding more lines as needed.

See the next chapter for colour variants of both themes, including Facebook dark mode and Android light mode! :)

# Facebook Messenger

A few notes for using this skin to its full potential:

  * For a single message from one person, use "fbtextsingle."
  * For the first message in a series from one person, use "fbtextfirst," followed by "fbtextmiddle" as many times as you need, and ending with "fbtextlast." This will round the corners correctly.
  * For the person sending the messages, it's "fbreply," otherwise identical.
  * Omit "fbgrouptext" if it's a conversation between two people, and for the person sending messages.
  * Use only first names in "fbgrouptext."
  * You can use either first or full names in @ messages (see preview code for how to do those). Note that the code is slightly different depending on if it's a text (incoming) or reply (outgoing).
  * Timestamps are written in the format "FEB. 26 AT 14:53" for things more than a week old, "MON. AT 09:31" for things more than a day old, or just the time otherwise. Mine is in 24hr clock but I honestly don't know if that's the default or if I had to choose that.
  * From my estimate, there's a new timestamp after a break of 15 minutes or more in conversation.
  * You can use "fbhide" in the same way as "hide" in the iOS version, to provide alternate text and formatting when readers disable the work skin. It's a little messy if you have a group chat, because I haven't figured out how to hide "fbgrouptext" yet.
  * Links show up as underlined text.
  * AO3 likes to delete "span" and "mark" tags, so make sure you save the code elsewhere if you're editing your fic a lot. That goes for all code, really, because it likes to mess up your HTML tags and add unnecessary ones.



## Facebook Messenger - Light Mode Live Preview

Group Chat Name   
  
22:46   
This is a single message from the POV character.   
Character B   
This is a single message from someone in the group chat.   
This is a   
two-part message   
Character C   
This is a   
three-part message   
from someone else   
Where are you @Character B?   
Character B   
I'm at @Character C's house

## Facebook Messenger - Light Mode HTML
    
    
      
     <div class="fbmessenger">
        <p class="fbmessagebody">
            <span class="fbheader">Group Chat Name</span><br /><br />
            <span class="fbtime">22:46</span><br />
            <span class="fbreplysingle">This is a single message from the POV character.</span><br />
            <span class="fbgrouptext">Character B</span><br />
            <span class="fbtextsingle">This is a single message from someone in the group chat.</span><br />
            <span class="fbreplyfirst">This is a</span><br />
            <span class="fbreplylast">two-part message</span><br />
            <span class="fbgrouptext">Character C</span><br />
            <span class="fbtextfirst">This is a</span><br />
            <span class="fbtextmiddle">three-part message</span><br />
            <span class="fbtextlast">from someone else</span><br />
            <span class="fbreplysingle">Where are you <mark>@Character B</mark>?</span><br />
            <span class="fbgrouptext">Character B</span><br />
            <span class="fbtextsingle">I'm at <span>@Character C</span>'s house</span><br />
        </p>
    </div>
      
    

## Facebook Messenger - Light Mode CSS
    
    
      #workskin .fbmessenger {
      max-width: 300px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      display: table;
      margin: auto;
    }
    
    #workskin .fbheader {
      min-width: 300px;
      background-color: #FFFFFF;
      border-bottom: 1px solid #E7E7E7;
      color: #000000;
      font-weight: bold;
      padding-left: 1em;
      padding-bottom: 1em;
      padding-top: 1em;
      margin-left: -.5em;
      margin-right: -.5em;
      margin-bottom: -2em;
      text-align: left;
      display: table;
    }
    
    #workskin .fbmessagebody {
      background-color: #FFFFFF;
      display: table;
      padding-left: .5em;
      padding-right: .5em;
    }
    
    #workskin .fbtextsingle {
      float: left;
      color: #000000;
      margin: 0 0 0.5em;
      border-radius: 1em 1em 1em 1em;
      padding: 0.5em 1em;
      background: #F1F1F1;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .fbtextfirst {
      float: left;
      color: #000000;
      margin: 0 0 0.1em;
      border-radius: 1em 1em 1em 0.2em;
      padding: 0.5em 1em;
      background: #F1F1F1;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .fbtextmiddle {
      float: left;
      color: #000000;
      margin: 0 0 0.1em;
      border-radius: 0.2em 1em 1em 0.2em;
      padding: 0.5em 1em;
      background: #F1F1F1;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .fbtextlast {
      float: left;
      color: #000000;
      margin: 0 0 0.5em;
      border-radius: 0.2em 1em 1em 1em;
      padding: 0.5em 1em;
      background: #F1F1F1;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .fbtextsingle span {
      color: #5540FF;
    }
    
    #workskin .fbtextfirst span {
      color: #5540FF;
    }
    
    #workskin .fbtextmiddle span {
      color: #5540FF;
    }
    
    #workskin .fbtextlast span {
      color: #5540FF;
    }
    
    #workskin .fbreplysingle {
      float: right;
      color: #FFFFFF;
      margin: 0 0 0.5em;
      border-radius: 1em;
      padding: 0.5em 1em;
      background: #5540FF;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .fbreplyfirst {
      float: right;
      color: #FFFFFF;
      margin: 0 0 0.1em;
      border-radius: 1em 1em 0.2em 1em;
      padding: 0.5em 1em;
      background: #5540FF;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .fbreplymiddle {
      float: right;
      color: #FFFFFF;
      margin: 0 0 0.1em;
      border-radius: 1em 0.2em 0.2em 1em;
      padding: 0.5em 1em;
      background: #5540FF;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .fbreplylast {
      float: right;
      color: #FFFFFF;
      margin: 0 0 0.5em;
      border-radius: 1em 0.2em 1em 1em;
      padding: 0.5em 1em;
      background: #5540FF;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .fbreplysingle mark {
      background-color: #776FE9;
      color: #FFFFFF;
    }
    
    #workskin .fbreplyfirst mark {
      background-color: #776FE9;
      color: #FFFFFF;
    }
    
    #workskin .fbreplymiddle mark {
      background-color: #776FE9;
      color: #FFFFFF;
    }
    
    #workskin .fbreplylast mark {
      background-color: #776FE9;
      color: #FFFFFF;
    }
    
    #workskin .fbhide {
      display: none;
    }
    
    #workskin .fbtime {
      min-width: 295px;
      color: #7B7C80;
      font-size: .75em;
      padding-bottom: .5em;
      padding-top: .5em;
      margin-left: -.5em;
      margin-right: -.5em;
      margin-bottom: -.5em;
      text-align: center;
      text-transform: uppercase;
      display: table;
    }
    
    #workskin .fbgrouptext {
      color: #AEAEAE;
      font-size: .75em;
      padding-bottom: 0.5em;
      padding-top: 0;
      margin-left: 1em;
      margin-bottom: -2.5em;
      text-align: left;
      display: table;
      clear: both;
    }
    

# Android SMS

This one is a little more lightweight than the Facebook one. I don't actually use SMS much at all, so I don't know what all the features look like! This is based off OxygenOS 9.0.6 in dark theme which is what my phone uses.

A few notes for using this skin to its full potential:

  * Unlike Messenger, which has three message shapes, this one only has two, called "smstextfirst" (with rounded corners) and "smstextlast" (with one square corner).
  * For a single message from one person, use "smstextlast."
  * For the person sending the messages, it's "smsreply," otherwise identical.
  * For a string of messages, use "smstextfirst" for every message except the most recent one, which uses "smstextlast."
  * Timestamps are written in the format "Feb. 26, 14:53" for things more than a week old, "Fri. 09:31" for things more than a day old, or just the time otherwise. I assume it displays in 12hr clock if that's what your phone is set to.
  * Similarly to Facebook, it seems to put a new timestamp after 15-20 minute gaps in a conversation.
  * You can use "smshide" in the same way as "hide" in the iOS version, to provide alternate text and formatting when readers disable the work skin. This one should work fine, since it's a two-way conversation. Try it out by disabling the work skin at the top of the page!



## Android SMS - Dark Mode Live Preview

Contact   
  
2:12   
Character A: This is a single message from the POV character.   
Character B: This is a single message from the contact.   
Character A: This is a   
Character A: two-part message   
Character B: This is a   
Character B: three-part   
Character B: message

## Android SMS - Dark Mode HTML
    
    
      <div class="sms">
        <p class="smsmessagebody">
            <span class="smsheader">Contact</span><br /><br />
            <span class="smstime">2:12</span><br />
            <span class="smsreplylast"><span class="smshide">Character A: </span>This is a single message from the POV character.</span><br />
            <span class="smstextlast"><span class="smshide">Character B: </span>This is a single message from the contact.</span><br />
            <span class="smsreplyfirst"><span class="smshide">Character A: </span>This is a</span><br />
            <span class="smsreplylast"><span class="smshide">Character A: </span>two-part message</span><br />
            <span class="smstextfirst"><span class="smshide">Character B: </span>This is a</span><br />
            <span class="smstextfirst"><span class="smshide">Character B: </span>three-part</span><br />
            <span class="smstextlast"><span class="smshide">Character B: </span>message</span><br />
        </p>
    </div>
    

## Android SMS - Dark Mode CSS
    
    
      #workskin .sms {
      max-width: 300px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      display: table;
      margin: auto;
    }
    
    #workskin .smsheader {
      min-width: 300px;
      background-color: #000000;
      border-bottom: 1px solid #212121;
      color: #FFFFFF;
      font-weight: bold;
      padding-left: 1em;
      padding-bottom: 1em;
      padding-top: 1em;
      margin-left: -.5em;
      margin-right: -.5em;
      margin-bottom: -2em;
      text-align: left;
      display: table;
    }
    
    #workskin .smsmessagebody {
      background-color: #000000;
      display: table;
      padding-left: .5em;
      padding-right: .5em;
    }
    
    #workskin .smstextfirst {
      float: left;
      color: #FFFFFF;
      margin: 0 0 0.5em;
      border-radius: 1em 1em 1em 1em;
      padding: 0.5em 1em;
      background: #212121;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .smstextlast {
      float: left;
      color: #FFFFFF;
      margin: 0 0 0.5em;
      border-radius: 1em 1em 1em 0.2em;
      padding: 0.5em 1em;
      background: #212121;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .smsreplyfirst {
      float: right;
      color: #FFFFFF;
      margin: 0 0 0.5em;
      border-radius: 1em 1em 1em 1em;
      padding: 0.5em 1em;
      background: #04998D;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .smsreplylast {
      float: right;
      color: #FFFFFF;
      margin: 0 0 0.5em;
      border-radius: 1em 1em 0.2em 1em;
      padding: 0.5em 1em;
      background: #04998D;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .smshide {
      display: none;
    }
    
    #workskin .smstime {
      min-width: 295px;
      color: #7B7C80;
      font-size: .75em;
      padding-top: .5em;
      margin-left: -.5em;
      margin-right: -.5em;
      margin-bottom: -.5em;
      text-align: center;
      text-transform: capitalize;
      display: table;
    }
    


	2. Chapter 2

All of these colour schemes use the same HTML blocks as the default ones; you only need to switch out the CSS in your work skin. Note that you can only use one colour scheme per style (one for Messenger, one for SMS) at the moment. They're super easy to customize if you want different colours.

 **Tip:** To change just the accent colour in either light or dark mode, you can find and replace instances of #5540FF (main colour) and #776FE9 (highlight for @ messages, usually a few shades lighter) in the code with the hex codes of your choice. Other accent colours I sampled from screenshots are coral pink #E58586 and lavender purple #D696BB. I don't know the exact highlight shade for those ones.

# Facebook Messenger - Dark Mode

Because there can only be one colour scheme per work, I'll be showing this one as a screenshot.

The image shows dark mode with lavender purple, but the colour in the CSS below is the same darker purple as the light mode.

## Facebook Messenger - Dark Mode CSS
    
    
       .fbmessenger {
         max-width: 300px;
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
         display: table;
         margin: auto;
     }
    
     .fbheader {
         min-width: 300px;
         background-color: #000000;
         border-bottom: 1px solid #000000;
         color: #FFFFFF;
         font-weight: bold;
         padding-left: 1em;
         padding-bottom: 1em;
         padding-top: 1em;
         margin-left: -.5em;
         margin-right: -.5em;
         margin-bottom: -2em;
         text-align: left;
         display: table;
     }
    
     .fbmessagebody {
         background-color: #000000;
         display: table;
         padding-left: .5em;
         padding-right: .5em;
     }
    
     .fbtextsingle {
         float: left;
         color: #FFFFFF;
         margin: 0 0 0.5em;
         border-radius: 1em 1em 1em 1em;
         padding: 0.5em 1em;
         background: #303030;
         max-width: 75%;
         clear: both;
         position: relative;
     }
    
     .fbtextfirst {
         float: left;
         color: #FFFFFF;
         margin: 0 0 0.1em;
         border-radius: 1em 1em 1em 0.2em;
         padding: 0.5em 1em;
         background: #303030;
         max-width: 75%;
         clear: both;
         position: relative;
     }
    
     .fbtextmiddle {
         float: left;
         color: #FFFFFF;
         margin: 0 0 0.1em;
         border-radius: 0.2em 1em 1em 0.2em;
         padding: 0.5em 1em;
         background: #303030;
         max-width: 75%;
         clear: both;
         position: relative;
     }
    
     .fbtextlast {
         float: left;
         color: #FFFFFF;
         margin: 0 0 0.5em;
         border-radius: 0.2em 1em 1em 1em;
         padding: 0.5em 1em;
         background: #303030;
         max-width: 75%;
         clear: both;
         position: relative;
     }
    
     .fbtextsingle span {
         color: #5540FF;
     }
    
     .fbtextfirst span {
         color: #5540FF;
     }
    
     .fbtextmiddle span {
         color: #5540FF;
     }
    
     .fbtextlast span {
         color: #5540FF;
     }
    
     .fbreplysingle {
         float: right;
         color: #FFFFFF;
         margin: 0 0 0.5em;
         border-radius: 1em;
         padding: 0.5em 1em;
         background: #5540FF;
         max-width: 75%;
         clear: both;
         position: relative;
     }
    
     .fbreplyfirst {
         float: right;
         color: #FFFFFF;
         margin: 0 0 0.1em;
         border-radius: 1em 1em 0.2em 1em;
         padding: 0.5em 1em;
         background: #5540FF;
         max-width: 75%;
         clear: both;
         position: relative;
     }
    
     .fbreplymiddle {
         float: right;
         color: #FFFFFF;
         margin: 0 0 0.1em;
         border-radius: 1em 0.2em 0.2em 1em;
         padding: 0.5em 1em;
         background: #5540FF;
         max-width: 75%;
         clear: both;
         position: relative;
     }
    
     .fbreplylast {
         float: right;
         color: #FFFFFF;
         margin: 0 0 0.5em;
         border-radius: 1em 0.2em 1em 1em;
         padding: 0.5em 1em;
         background: #5540FF;
         max-width: 75%;
         clear: both;
         position: relative;
     }
    
     .fbreplysingle mark {
         background-color: #776FE9;
         color: #FFFFFF;
     }
    
     .fbreplyfirst mark {
         background-color: #776FE9;
         color: #FFFFFF;
     }
    
     .fbreplymiddle mark {
         background-color: #776FE9;
         color: #FFFFFF;
     }
    
     .fbreplylast mark {
         background-color: #776FE9;
         color: #FFFFFF;
     }
    
     .fbhide {
         display: none;
     }
    
     .fbtime {
         min-width: 295px;
         color: #7B7C80;
         font-size: .75em;
         padding-bottom: .5em;
         padding-top: .5em;
         margin-left: -.5em;
         margin-right: -.5em;
         margin-bottom: -.5em;
         text-align: center;
         text-transform: uppercase;
         display: table;
     }
    
     .fbgrouptext {
         color: #AEAEAE;
         font-size: .75em;
         padding-bottom: 0.5em;
         padding-top: 0;
         margin-left: 1em;
         margin-bottom: -2.5em;
         text-align: left;
         display: table;
         clear: both;
     }  
    
    
    

# Facebook Messenger - Halloween Theme Dark Mode
    
    
      
    

This theme is no longer available, but I have screenshots of it from which to sample colours. It's a gradient theme so it can't be replicated perfectly; if you'd like a lighter shade of orange, try replacing #E65810 with #EE9118.

The light mode version of this theme is the same as the regular light mode, just with the orange accent colour.
    
    
      
    
    
    
      
    

## Facebook Messenger - Halloween Theme Dark Mode CSS
    
    
       .fbmessenger {
        max-width: 300px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        display: table;
        margin: auto;
    }
    
    .fbheader {
        min-width: 300px;
        background-color: #0B0412;
        border-bottom: 1px solid #0B0412;
        color: #FFFFFF;
        font-weight: bold;
        padding-left: 1em;
        padding-bottom: 1em;
        padding-top: 1em;
        margin-left: -.5em;
        margin-right: -.5em;
        margin-bottom: -2em;
        text-align: left;
        display: table;
    }
    
    .fbmessagebody {
        background-color: #0B0412;
        display: table;
        padding-left: .5em;
        padding-right: .5em;
    }
    
    .fbtextsingle {
        float: left;
        color: #FFFFFF;
        margin: 0 0 0.5em;
        border-radius: 1em 1em 1em 1em;
        padding: 0.5em 1em;
        background: #3A2E3C;
        max-width: 75%;
        clear: both;
        position: relative;
    }
    
    .fbtextfirst {
        float: left;
        color: #FFFFFF;
        margin: 0 0 0.1em;
        border-radius: 1em 1em 1em 0.2em;
        padding: 0.5em 1em;
        background: #3A2E3C;
        max-width: 75%;
        clear: both;
        position: relative;
    }
    
    .fbtextmiddle {
        float: left;
        color: #FFFFFF;
        margin: 0 0 0.1em;
        border-radius: 0.2em 1em 1em 0.2em;
        padding: 0.5em 1em;
        background: #3A2E3C;
        max-width: 75%;
        clear: both;
        position: relative;
    }
    
    .fbtextlast {
        float: left;
        color: #FFFFFF;
        margin: 0 0 0.5em;
        border-radius: 0.2em 1em 1em 1em;
        padding: 0.5em 1em;
        background: #3A2E3C;
        max-width: 75%;
        clear: both;
        position: relative;
    }
    
    .fbtextsingle span {
        color: #E65810;
    }
    
    .fbtextfirst span {
        color: #E65810;
    }
    
    .fbtextmiddle span {
        color: #E65810;
    }
    
    .fbtextlast span {
        color: #E65810;
    }
    
    .fbreplysingle {
        float: right;
        color: #FFFFFF;
        margin: 0 0 0.5em;
        border-radius: 1em;
        padding: 0.5em 1em;
        background: #E65810;
        max-width: 75%;
        clear: both;
        position: relative;
    }
    
    .fbreplyfirst {
        float: right;
        color: #FFFFFF;
        margin: 0 0 0.1em;
        border-radius: 1em 1em 0.2em 1em;
        padding: 0.5em 1em;
        background: #E65810;
        max-width: 75%;
        clear: both;
        position: relative;
    }
    
    .fbreplymiddle {
        float: right;
        color: #FFFFFF;
        margin: 0 0 0.1em;
        border-radius: 1em 0.2em 0.2em 1em;
        padding: 0.5em 1em;
        background: #E65810;
        max-width: 75%;
        clear: both;
        position: relative;
    }
    
    .fbreplylast {
        float: right;
        color: #FFFFFF;
        margin: 0 0 0.5em;
        border-radius: 1em 0.2em 1em 1em;
        padding: 0.5em 1em;
        background: #E65810;
        max-width: 75%;
        clear: both;
        position: relative;
    }
    
    .fbreplysingle mark {
        background-color: #E65810;
        color: #FFFFFF;
    }
    
    .fbreplyfirst mark {
        background-color: #E65810;
        color: #FFFFFF;
    }
    
    .fbreplymiddle mark {
        background-color: #E65810;
        color: #FFFFFF;
    }
    
    .fbreplylast mark {
        background-color: #E65810;
        color: #FFFFFF;
    }
    
    .fbhide {
        display: none;
    }
    
    .fbtime {
        min-width: 295px;
        color: #7B7C80;
        font-size: .75em;
        padding-bottom: .5em;
        padding-top: .5em;
        margin-left: -.5em;
        margin-right: -.5em;
        margin-bottom: -.5em;
        text-align: center;
        text-transform: uppercase;
        display: table;
    }
    
    .fbgrouptext {
        color: #AEAEAE;
        font-size: .75em;
        padding-bottom: 0.5em;
        padding-top: 0;
        margin-left: 1em;
        margin-bottom: -2.5em;
        text-align: left;
        display: table;
        clear: both;
    }
    

# Android SMS - Colourful

## Android SMS - Colourful CSS
    
    
       .sms {
      max-width: 300px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      display: table;
      margin: auto;
    }
    
     .smsheader {
      min-width: 300px;
      background-color: #04998D;
      border-bottom: 1px solid #04998D;
      color: #FFFFFF;
      font-weight: bold;
      padding-left: 1em;
      padding-bottom: 1em;
      padding-top: 1em;
      margin-left: -.5em;
      margin-right: -.5em;
      margin-bottom: -2em;
      text-align: left;
      display: table;
    }
    
     .smsmessagebody {
      background-color: #FAFAFA;
      display: table;
      padding-left: .5em;
      padding-right: .5em;
    }
    
     .smstextfirst {
      float: left;
      color: #000000;
      margin: 0 0 0.5em;
      border-radius: 1em 1em 1em 1em;
      padding: 0.5em 1em;
      background: #E9E9E9;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
     .smstextlast {
      float: left;
      color: #000000;
      margin: 0 0 0.5em;
      border-radius: 1em 1em 1em 0.2em;
      padding: 0.5em 1em;
      background: #E9E9E9;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
     .smsreplyfirst {
      float: right;
      color: #FFFFFF;
      margin: 0 0 0.5em;
      border-radius: 1em 1em 1em 1em;
      padding: 0.5em 1em;
      background: #04998D;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
     .smsreplylast {
      float: right;
      color: #FFFFFF;
      margin: 0 0 0.5em;
      border-radius: 1em 1em 0.2em 1em;
      padding: 0.5em 1em;
      background: #04998D;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
     .smshide {
      display: none;
    }
    
     .smstime {
      min-width: 295px;
      color: #7B7C80;
      font-size: .75em;
      padding-top: .5em;
      margin-left: -.5em;
      margin-right: -.5em;
      margin-bottom: -.5em;
      text-align: center;
      text-transform: capitalize;
      display: table;
    }
    

# Android SMS - Light

## Android SMS - Light CSS
    
    
       .sms {
      max-width: 300px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      display: table;
      margin: auto;
    }
    
     .smsheader {
      min-width: 300px;
      background-color: #FAFAFA;
      border-bottom: 1px solid #E6E6E6;
      color: #000000;
      font-weight: bold;
      padding-left: 1em;
      padding-bottom: 1em;
      padding-top: 1em;
      margin-left: -.5em;
      margin-right: -.5em;
      margin-bottom: -2em;
      text-align: left;
      display: table;
    }
    
     .smsmessagebody {
      background-color: #FAFAFA;
      display: table;
      padding-left: .5em;
      padding-right: .5em;
    }
    
     .smstextfirst {
      float: left;
      color: #000000;
      margin: 0 0 0.5em;
      border-radius: 1em 1em 1em 1em;
      padding: 0.5em 1em;
      background: #E9E9E9;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
     .smstextlast {
      float: left;
      color: #000000;
      margin: 0 0 0.5em;
      border-radius: 1em 1em 1em 0.2em;
      padding: 0.5em 1em;
      background: #E9E9E9;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
     .smsreplyfirst {
      float: right;
      color: #FFFFFF;
      margin: 0 0 0.5em;
      border-radius: 1em 1em 1em 1em;
      padding: 0.5em 1em;
      background: #04998D;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
     .smsreplylast {
      float: right;
      color: #FFFFFF;
      margin: 0 0 0.5em;
      border-radius: 1em 1em 0.2em 1em;
      padding: 0.5em 1em;
      background: #04998D;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
     .smshide {
      display: none;
    }
    
     .smstime {
      min-width: 295px;
      color: #7B7C80;
      font-size: .75em;
      padding-top: .5em;
      margin-left: -.5em;
      margin-right: -.5em;
      margin-bottom: -.5em;
      text-align: center;
      text-transform: capitalize;
      display: table;
    }
    

**Author's Note:**

> Fics that use this code:  
> [Entr'acte](https://archiveofourown.org/works/29164167/) by [Rainsong](https://archiveofourown.org/users/Rainsong/pseuds/Rainsong)


End file.
